<template>
  <div
    class="fixed w-[100vw] h-[100vh] left-0 top-0 z-[9999999] before:w-[100%] before:h-[100%] before:absolute before:left-0 before:top-0 before:bg-[#1d1c1c] before:opacity-[0.9]"
  >
    <div
      class="animate__animated animate__fadeIn w-[800px] aspect-video bg-[#232324] absolute left-[50%] top-[50%] ml-[-400px] mt-[-250px] border border-[#3e3d3d] border-solid rounded"
    >
      <div
        class="flex items-center justify-between mb-[20px] w-[100%] px-[20px] pt-[10px]"
      >
        <span class="text-[18px]">请配置token存放位置</span>
        <el-icon size="20" class="cursor-pointer" @click="$emit('close')"
          ><CloseBold
        /></el-icon>
      </div>

      <div class="">
        <el-tabs
          v-model="tabActiveName"
          @tab-change="tabChange"
          class="bg-[#232324] w-[90%] mx-[auto]"
        >
          <el-tab-pane label="Header" name="Header" class="bg-[#232324]">
          </el-tab-pane>
          <el-tab-pane label="Body" name="Body" class="bg-[#232324]">
            <el-radio-group
              v-model="bodyType"
              class="mb-[10px]"
              @change="changeType"
            >
              <el-radio :value="1">x-www-form-urlencoded</el-radio>
              <el-radio :value="2">form-data</el-radio>
            </el-radio-group>
          </el-tab-pane>
        </el-tabs>
        <el-table
          :data="params"
          class="mb-[20px] !w-[730px] mx-auto"
          header-row-class-name="headerClass"
        >
          <el-table-column prop="Key" label="Key">
            <template #default="scope">
              <el-input
                prefix-icon="Edit"
                v-model="scope.row.Key"
                placeholder="请配置字段名"
              />
            </template>
          </el-table-column>
          <el-table-column prop="Value" label="Value">
            <template #default="scope">
              <el-input disabled v-model="scope.row.Value" /> </template
          ></el-table-column>
        </el-table>

        <div class="px-[20px] my-[20px] select-none">
          <span>Token值将存放在：</span>

          <span>{{ states.label || "" }}</span>
        </div>

        <div
          class="absolute bottom-[20px] right-[20px] flex items-center justify-center"
        >
          <el-button type="primary" class="w-[100px]" @click="confirm"
            >确定</el-button
          >
          <el-button class="w-[100px] ml-[20px]" @click="$emit('close')"
            >取消</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, computed, onMounted, nextTick } from "vue";
let props = defineProps({
  initState: {
    type: Object,
    default: () => {},
  },
});
let emit = defineEmits(["close"]);
let tabActiveName = ref("Header");
let bodyType = ref(1);
let params = ref([{ Key: "Authorization", Value: "token-value" }]);
const tabChange = () => {};
const changeType = () => {};
onMounted(() => {
  if (props.initState.params) {
    params.value[0].Key = props.initState.params;
    tabActiveName.value = props.initState.type.includes("Body")
      ? "Body"
      : "Header";
    bodyType.value = props.initState.type.includes("BodyParams") ? 1 : 2;
  }
});

let states = ref({ type: "", label: "", params: "" });
watch(
  [() => params.value, () => tabActiveName.value, () => bodyType.value],
  (newVal) => {
    // console.log(params.value);
    if (tabActiveName.value == "Header") {
      states.value = {
        type: "Header",
        label: `请求头的${params.value[0].Key}字段中`,
        params: params.value[0].Key,
      };
    }
    if (tabActiveName.value == "Body") {
      if (bodyType.value == 1) {
        states.value = {
          type: "BodyParams",
          label: `请求体的${params.value[0].Key}字段中`,
          params: params.value[0].Key,
        };
      }
      if (bodyType.value == 2) {
        states.value = {
          type: "BodyFormData",
          label: `请求体的${params.value[0].Key}字段中，以FormData格式传参`,
          params: params.value[0].Key,
        };
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const confirm = () => {
  emit("close", states.value);
};
</script>

<style scoped lang="scss">
:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #232324 !important;
}
:deep(.el-table tr) {
  background-color: #232324 !important;
}
:deep(.el-table th.el-table__cell) {
  background: #39393e !important;
}

:deep(
    .el-input__wrapper,
    .el-input__inner,
    .el-input .el-input-group__prepend,
    .el-select .el-select__wrapper
  ) {
  background: #39393e !important;
}

:deep(.el-input-group__prepend) {
  background: #39393e !important;
}

:deep(.el-tabs__nav-wrap:after) {
  background-color: #646567 !important;
}

:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom-color: #646567 !important;
}
:deep(.el-table td.el-table__cell) {
  border-bottom-color: #646567 !important;
}
:deep(.el-table__inner-wrapper:before) {
  height: 0 !important;
}
</style>
